<template>
  <vxe-table
    v-bind="$attrs"
    :loading="loading"
    :data="tableData"
    @checkbox-change="handleCheckboxChange"
  >
    <slot></slot>
  </vxe-table>
  <vxe-pager
    v-if="pageVO"
    v-model:currentPage="pageVO.currentPage"
    v-model:pageSize="pageVO.pageSize"
    :total="pageVO.total"
    @page-change="pageChange"
  >
  </vxe-pager>
</template>
<script setup>
import { reactive, ref, onMounted, useAttrs } from "vue";
import { cloneDeep } from "lodash";
const attrs = useAttrs();
const props = defineProps({
  getList: Function,
  pageVO: {
    type: Object,
    default: () => {
      return {};
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const pageVO = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 20,
});
//数据
const loading = ref(false);
const tableData = ref([]);
//选中的数据
const selectColumn = ref([]);
//选中的数据
const handleCheckboxChange = (value) => {
  if (attrs.onCheckboxChange && typeof attrs.onCheckboxChange === "function")
    return (selectColumn.value = {
      code: 400,
      msg: "由于你传递了父组件的onCheckboxChange方法，所以你无法修改选中的数据 ",
    });
  else selectColumn.value = cloneDeep(value.records);
};

const pageChange = ({ pageSize, currentPage }) => {
  console.log("翻页事件");
  pageVO.currentPage = currentPage;
  pageVO.pageSize = pageSize;
};
//获取数据
const getList = async () => {
  loading.value = true;
  const { currentPage, pageSize } = pageVO;
  const requestData = {
    ...props.params,
    currentPage,
    pageSize,
  };
  console.log("请求参数", requestData);

  setTimeout(async () => {
    tableData.value = await props.getList(props.params);
    loading.value = false;
  }, 200);
};
//刷新数据
const refreshTable = () => {
  selectColumn.value = [];
  getList();
};
//初始化
onMounted(() => {
  getList();
});
//暴露数据
defineExpose({
  tableData, //暴露数据
  selectColumn, //暴露选中的数据
  refreshTable,
});
</script>
